<template>
    <view class="wrap">
        <u-navbar :is-back="false" title-color="#ffffff" title="意向列表" :background="background"></u-navbar>
        <scroll-view scroll-y style="height: 100%;width: 100%;background-color: #f3f4f6">
            <!--有数据 sta-->
            <view v-if="goodsList.length>1" class="page-box">
                <u-checkbox-group @change="checkboxGroupChange">
                    <view class="item" v-for="(item, index) in goodsList" :key="index">
                        <view style="padding-top: 50px">
                            <u-checkbox
                                    @change="checkboxChange"
                                    v-model="item.checked"
                                    shape="circle"
                            >

                            </u-checkbox>
                        </view>
                        <view class="left"><image :src="item.goodsUrl" mode="aspectFill"></image></view>
                        <view class="content">
                            <view class="title u-line-2">{{ item.title }}</view>
                            <view class="type">{{ item.type }}</view>
                            <view class="delivery-time">发货时间 {{ item.deliveryTime }}</view>
                        </view>
                        <view class="right">
                            <view class="price">
                                ￥{{ priceInt(item.price) }}
                                <text class="decimal">.{{ priceDecimal(item.price) }}</text>
                            </view>
                            <view class="number">x{{ item.number }}</view>
                        </view>
                    </view>
                </u-checkbox-group>
            </view>

            <!--无数据 sta-->
            <view v-else class="page-box" >
                <view>
                    <view class="centre">
                        <image src="https://cdn.uviewui.com/uview/template/taobao-order.png" mode=""></image>
                        <view class="explain">
                            您还没有添加相关意向订单
                            <view class="tips">可以去分类看看哦</view>
                        </view>
                        <view class="btn">随便逛逛</view>
                    </view>
                </view>
            </view>

        </scroll-view>
        <view class="navigation">
            <view style="float: left">
                <u-checkbox
                        @change="checkboxChange"
                        shape="circle"
                >
                全选
                </u-checkbox>
            </view>
            <view class="buy btn u-line-1">提交意向</view>
        </view>
        <i-tabbar></i-tabbar>
    </view>

</template>

<script>
    import tabbar from  'pages/shops/tabbar/index';
    export default {
        components:{
            'i-tabbar':tabbar
        },
        name: "index",
        data(){
            return{
                goodsList: [
                    {
                        goodsUrl: '//img13.360buyimg.com/n7/jfs/t1/103005/7/17719/314825/5e8c19faEb7eed50d/5b81ae4b2f7f3bb7.jpg',
                        title: '【冬日限定】现货 原创jk制服女2020冬装新款小清新宽松软糯毛衣外套女开衫短款百搭日系甜美风',
                        type: '灰色;M',
                        deliveryTime: '付款后30天内发货',
                        price: '348.58',
                        number: 2,
                        checked: true,
                        disabled: false
                    },
                    {
                        goodsUrl: '//img12.360buyimg.com/n7/jfs/t1/102191/19/9072/330688/5e0af7cfE17698872/c91c00d713bf729a.jpg',
                        title: '【葡萄藤】现货 小清新学院风制服格裙百褶裙女短款百搭日系甜美风原创jk制服女2020新款',
                        type: '45cm;S',
                        deliveryTime: '付款后30天内发货',
                        price: '135.00',
                        number: 1,
                        checked: true,
                        disabled: false
                    }
                ],
                background: {
                    //backgroundColor: '#19be6b',

                    // 导航栏背景图
                    //background: 'url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat',
                    // 还可以设置背景图size属性
                    // backgroundSize: 'cover',

                    // 渐变色
                    backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
                }
            }

        },
        computed: {
            // 价格小数
            priceDecimal() {
                return val => {
                    if (val !== parseInt(val)) return val.slice(-2);
                    else return '00';
                };
            },
            // 价格整数
            priceInt() {
                return val => {
                    if (val !== parseInt(val)) return val.split('.')[0];
                    else return val;
                };
            }
        },
        methods: {
            // 选中某个复选框时，由checkbox时触发
            checkboxChange(e) {
                //console.log(e);
            },
            // 选中任一checkbox时，由checkbox-group触发
            checkboxGroupChange(e) {
                // console.log(e);
            },
            // 全选
            checkedAll() {
                this.goodsList.map(val => {
                    val.checked = true;
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .page-box {
        width: 710rpx;
        background-color: #ffffff;
        margin: 20rpx auto;
        border-radius: 20rpx;
        box-sizing: border-box;
        padding: 20rpx;
        font-size: 28rpx;

        .item {
            display: flex;
            margin: 20rpx 0 0;
            border-bottom: 1px solid #f3f4f6;
            .left {
                margin-right: 20rpx;
                image {
                    width: 200rpx;
                    height: 200rpx;
                    border-radius: 10rpx;
                }
            }
            .content {
                .title {
                    font-size: 28rpx;
                    line-height: 50rpx;
                }
                .type {
                    margin: 10rpx 0;
                    font-size: 24rpx;
                    color: $u-tips-color;
                }
                .delivery-time {
                    color: #e5d001;
                    font-size: 24rpx;
                }
            }
            .right {
                margin-left: 10rpx;
                padding-top: 20rpx;
                text-align: right;
                .decimal {
                    font-size: 24rpx;
                    margin-top: 4rpx;
                }
                .number {
                    color: $u-tips-color;
                    font-size: 24rpx;
                }
            }
        }
        .total {
            margin-top: 20rpx;
            text-align: right;
            font-size: 24rpx;
            .total-price {
                font-size: 32rpx;
            }
        }
        .bottom {
            display: flex;
            margin-top: 40rpx;
            padding: 0 10rpx;
            justify-content: space-between;
            align-items: center;
            .btn {
                line-height: 52rpx;
                width: 160rpx;
                border-radius: 26rpx;
                border: 2rpx solid $u-border-color;
                font-size: 26rpx;
                text-align: center;
                color: $u-type-info-dark;
            }
            .evaluate {
                color: $u-type-warning-dark;
                border-color: $u-type-warning-dark;
            }
        }
    }
    .centre {
        text-align: center;
        margin: 200rpx auto;
        font-size: 32rpx;
        image {
            width: 164rpx;
            height: 164rpx;
            border-radius: 50%;
            margin-bottom: 20rpx;
        }
        .tips {
            font-size: 24rpx;
            color: #999999;
            margin-top: 20rpx;
        }
        .btn {
            margin: 80rpx auto;
            width: 200rpx;
            border-radius: 32rpx;
            line-height: 64rpx;
            color: #ffffff;
            font-size: 26rpx;
            background: linear-gradient(270deg, rgba(249, 116, 90, 1) 0%, rgba(255, 158, 1, 1) 100%);
        }
    }
    .wrap {
        display: flex;
        flex-direction: column;
        height: calc(100vh - var(--window-top));
        width: 100%;
    }
    .swiper-box {
        flex: 1;
    }
    .swiper-item {
        height: 100%;
    }
    .navigation {
        position: fixed;
        bottom: 50px;
        left: 0;
        width: 100%;
        border: solid 2rpx #f2f2f2;
        background-color: #ffffff;
        padding: 16rpx 0;
        .btn {
            font-size: 28rpx;
            line-height: 66rpx;
            padding: 0 30rpx;
            border-radius: 36rpx;
            color: #ffffff;
            float: right;
            margin-right: 20px;
            background-color: #ff7900;
        }

    }

</style>